import React from 'react'
import {
  View,
  WebView
} from 'react-native'
const htmlFormat = function(content){
  return `
<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <style>
    html {
      color: #000;
      background: #fff;
      overflow-y: scroll;
      -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
    }
    html * {
      outline: none;
      -webkit-text-size-adjust: none;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
    html,
    body {
      font-family: sans-serif;  line-height:24px; font-size:14px;
    }
    /* 内外边距通常让各个浏览器样式的表现位置不同 */
    body,
    div,
    dl,
    dt,
    dd,
    ul,
    ol,
    li,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    pre,
    code,
    form,
    fieldset,
    legend,
    input,
    textarea,
    p,
    blockquote,
    th,
    td,
    hr,
    button,
    article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    menu,
    nav,
    section {
      margin: 0;
      padding: 0;
    }
    input,
    select,
    textarea {
      font-size: 100%;
    }
    /* 去掉各 Table  cell 的边距并让其边重合 */
    table {
      border-collapse: collapse;
      border-spacing: 0;
    }
    /* 去除默认边框 */
    fieldset,
    img {
      border: 0;
    }
    /* 去掉 firefox 下此元素的边框 */
    abbr,
    acronym {
      border: 0;
      font-variant: normal;
    }
    /* 一致的 del 样式 */
    del {
      text-decoration: line-through;
    }
    address,
    caption,
    cite,
    code,
    dfn,
    em,
    th,
    var {
      font-style: normal;
      font-weight: 500;
    }
    /* 去掉列表前的标识, li 会继承 */
    ol,
    ul {
      /*list-style: none;*/
    }
    /* 对齐是排版最重要的因素, 别让什么都居中 */
    caption,
    th {
      text-align: left;
    }
    /* 来自 yahoo, 让标题都自定义, 适应多个系统应用 */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-size: 100%;
      font-weight: bold;
    }
    q:before,
    q:after {
      content: '';
    }
    /* 统一上标和下标 */
    sub,
    sup {
      font-size: 75%;
      line-height: 0;
      position: relative;
      vertical-align: baseline;
    }
    sup {
      top: -0.5em;
    }
    sub {
      bottom: -0.25em;
    }
    /* 正常链接 未访问 */
    /* 鼠标悬停 */
    a:hover {
      text-decoration: underline;
    }
    /* 默认不显示下划线，保持页面简洁 */
    ins,
    a {
      text-decoration: none;
    }

/* Pretty printing styles. Used with prettify.js. */
/* SPAN elements with the classes below are added by prettyprint. */
.pln { color: #000 }  /* plain text */

@media screen {
  .str { color: #080 }  /* string content */
  .kwd { color: #008 }  /* a keyword */
  .com { color: #800 }  /* a comment */
  .typ { color: #606 }  /* a type name */
  .lit { color: #066 }  /* a literal value */
  /* punctuation, lisp open bracket, lisp close bracket */
  .pun, .opn, .clo { color: #660 }
  .tag { color: #008 }  /* a markup tag name */
  .atn { color: #606 }  /* a markup attribute name */
  .atv { color: #080 }  /* a markup attribute value */
  .dec, .var { color: #606 }  /* a declaration; a variable name */
  .fun { color: red }  /* a function name */
}

/* Use higher contrast and text-weight for printable form. */
@media print, projection {
  .str { color: #060 }
  .kwd { color: #006; font-weight: bold }
  .com { color: #600; font-style: italic }
  .typ { color: #404; font-weight: bold }
  .lit { color: #044 }
  .pun, .opn, .clo { color: #440 }
  .tag { color: #006; font-weight: bold }
  .atn { color: #404 }
  .atv { color: #060 }
}

/* Put a border around prettyprinted code snippets. */
pre.prettyprint { padding: 2px; border: 1px solid #888 }

/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0 } /* IE indents via margin-left */
li.L0,
li.L1,
li.L2,
li.L3,
li.L5,
li.L6,
li.L7,
li.L8 { list-style-type: none }
/* Alternate shading for lines */
li.L1,
li.L3,
li.L5,
li.L7,
li.L9 { background: #eee }

    body, input, p, textarea {
        font-size: 14px;
        word-break: break-word;
    }
   
    .content{padding:10px;}
    img{max-width:100%;}

    </style>
    <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
  </head>
  <body>
  <div class="content">${content}</div>
  </body>
</html>
`
}

export default (props)=>{
  const {content} = props
  const html = htmlFormat(content)
  return (
    <WebView
      javaScriptEnabled={true}
      source={{html}}
      scalesPageToFit={true}
    />
  )
}